const path = require('path')
//启用热更新的第2步
const webpack = require('webpack')
//x导入在内存中生成html页面第插件,只要是插件就要放到plugins中去
//这个插件的两个作用 
//1 自动在内存中根据指定页面生成一个内存的页面
//2 自动，把打包好的bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

//这个配置文件，其实就是一个js文件，通过 node 中的模块操作 向外暴露了一个配置对象
module.exports = {
  //在配置文件中 需要手动指定入口 和 出口
  entry: path.join(__dirname, './src/main.js'), //入口 要使用webpack 打包哪个文件
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js', //这是指定输出的文件的名称
    publicPath: '/'
  },
  devServer: {
    //这时dev-server 命令参数的第二种形式，相对来说 这种方式麻烦一些
    //--open --port 3000 --contentBase src --hot
    open: true,
    port: 3300,
    contentBase: 'src',
    hot: true //启用热更新的第1步
  },
  plugins: [
    //配置插件的节点，new 一个热更新的 模块对象，这是
    new webpack.HotModuleReplacementPlugin(),//启用热更新的第3步
    //创建一个在内存中 生成html 页面的插件
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), //指定 模版页面，将来会根据指定
      //页面路径 去生成内存中第页面
      filename: 'index.html'
    })
  ],
  module: {//这个节点 用于配置 所有 第三方模块 加载器
    rules: [//匹配规则
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/, 
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.scss$/, 
        use: ['style-loader', 'css-loader', 'scss-loader']
      },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,  //处理图片路径的
        use: 'url-loader?limit=7632&name=[hash:32]-[name].[ext]' //limit is the size of pohto, unit is byte.
        //if the size of photo we used >=7632, 不会被转成base64. 之前叫啥名打包后还叫啥
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,  //处理图片路径的
        use: 'url-loader' 
      },
    ]

  }
}

//当我们在控制台 直接输入 webpack 命令执行的时候 webpack 做了以下几步：
//1。 首先 webpack发现 我们并没有通过命令的形式，给它指定入口和出口
//2 webpack就会去项目的 根目录中 查找一个叫做 ‘webpack.config.js’ 的配置文件
//3 当找到配置文件后，webpack 会去解析执行这个 配置文件 当解析执行完配置文件后就得到了 配置
//文件中导出的配置对象
//4 当webpack拿到 配置对象后，就拿到了 配置对象中，指定的入口和出口，然后进行打包构建；

//使用webpack-dev-server 这个工具 来实现自动打包编译的功能,要想使用该工具 本地必须安装webpack
//5.webpack-dev-server 帮我们打包生成的 bundle.js文件，并没有存放到 实际的物理磁盘上；而是
//直接托管到了电脑的内存中，所以 我们在 项目根目录中，根本找不到 这个打包好的 bundle.js
//6. 我们可以认为，webpack-dev-server 把打包好的 文件 以一种虚拟的形式 托管到了 咱们项目的
//根目录中 虽然我们看不到它，但是 可以认为 和 dist src node_module平级，有一个看不见的文件，
//叫做bundle.js。 放到内存中 快